<template>
  <van-swipe-cell>
    <div
      class="flex items-center py-[10px] px-[22px] active:bg-[#F3F3F3]"
      @click="clickConversation"
    >
      <div v-if="source.isPinned" class="pinned"></div>
      <Avatar
        :size="48"
        :src="source.faceURL"
        :desc="source.showName"
        :is-group="isGroup"
        :is-notification="isNotification"
      />
      <div class="mx-3 flex h-12 flex-1 flex-col justify-evenly">
        <div class="max-w-[40vw] truncate text-[15px]">{{ source.showName }}</div>
        <div class="max-w-[40vw] truncate text-[13px] text-[#666]">
          <span v-show="messagePrefix" class="mr-1" :class="{ 'text-[#1B72EC]': activePrefix }">
            {{ messagePrefix }}
          </span>
          <span>{{ formattedMessage }}</span>
        </div>
      </div>
      <div
        class="flex h-12 flex-col items-end text-xs text-[#999]"
        :class="{ 'justify-evenly': source.unreadCount > 0 }"
      >
        <span class="w-max">{{ latestMessageTime }}</span>
        <van-badge
          class="w-fit"
          color="#F44038"
          :content="source.unreadCount"
          max="99"
          :show-zero="false"
        />
      </div>
    </div>
  </van-swipe-cell>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useRouter } from 'vue-router';
  import type { ConversationItem, MessageItem } from '@openim/client-sdk';
  import { MessageReceiveOptType, SessionType, GroupAtType } from '@openim/client-sdk';
  import Avatar from '@/components/Avatar/UserAvatar.vue';
  import { formatConversionTime, getConversationContent } from '@/utils/im';
  import useConversationStore from '@/store/conversation';
  import { GroupSessionTypes } from '@/types/im';

  type ConversationItemProps = {
    source: ConversationItem;
  };

  const router = useRouter();
  const conversationStore = useConversationStore();
  const props = defineProps<ConversationItemProps>();

  const isGroup = GroupSessionTypes.includes(props.source.conversationType);
  const isNotification = props.source.conversationType === SessionType.Notification;

  const formattedMessage = computed(() => {
    let parsedMessage: MessageItem | undefined = undefined;
    try {
      parsedMessage = JSON.parse(props.source.latestMsg);
    } catch (e) {
      console.log(e);
    }
    if (!parsedMessage) return '';
    return getConversationContent(parsedMessage);
  });

  const latestMessageTime = computed(() => formatConversionTime(props.source.latestMsgSendTime));

  const messagePrefix = computed(() => {
    let prefix = '';

    if (props.source?.recvMsgOpt !== MessageReceiveOptType.Nomal && props.source.unreadCount > 0) {
      prefix = `[${props.source.unreadCount}条]`;
    }

    return prefix;
  });

  const activePrefix = computed(
    () => props.source.groupAtType !== GroupAtType.AtNormal || props.source.draftText
  );

  const clickConversation = () => {
    conversationStore.updateCurrentConversation(props.source);
    let path = 'chat';
    if (props.source.conversationType === SessionType.Notification) {
      path = 'notifyMessageList';
    }
    router.push(path);
  };
</script>

<style lang="scss" scoped>
  // .pinned {
  //   position: absolute;
  //   top: 4px;
  //   right: 8px;
  //   width: 8px;
  //   height: 8px;
  //   background-image: linear-gradient(to bottom left, #314ffe 50%, white 50%);
  // }

  // :deep(.van-button) {
  //   height: 100%;
  //   max-width: 70px;
  //   border-radius: 0;
  // }

  // :deep(.van-badge--top-right) {
  //   transform: translate(0, 0);
  // }
</style>
